<template>
  <div>
    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="index" label="序号"></el-table-column>
      <el-table-column label="账号" prop="account"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="头像" prop="avatar">
          <template slot-scope="scope">
          <img
            :src="`http://www.jfqiandai.com/file${scope.row.avatar}`"
            style="width:80px"
          >
        </template>
      </el-table-column>
       <el-table-column label="电话" prop="phone"></el-table-column>
      <!-- <el-table-column
        label="拥有权限"
        width="400"
      >
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>-->
      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button @click="EditClick(scope.row)" type="primary" size="small">更改权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginat">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 弹框 -->
    <el-dialog title="代理认证" :visible.sync="dialogVisible" width="20%">
      <div>
        <el-tree
          :data="RoleList"
          show-checkbox
          ref="tree"
          node-key="roleId"
          :default-checked-keys="defaultList"
          :props="defaultProps"
        ></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGrant">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      val: 1, //当前多少页
      total: 0,
      currentPage4: 1,
      aid: 0, //管理员id
      List: [],
      dialogVisible: false,
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" }
      ],

      defaultProps: {
        children: "children",
        label: "roleName"
      },
      RoleList: [], //角色列表
      defaultList: [], //默认选择
      params: [] //提交参数
    };
  },
  created() {
    this.getRole();
    this.getList();
  },

  methods: {
    //分页
    handleCurrentChange(val) {
      this.val = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },

    //编辑
    EditClick(row) {
      this.dialogVisible = true;
      this.aid = row.id;
      this.getfindAdmin(row.id);
    },

    //树确定
    submitGrant() {
      let ridList = this.$refs.tree.getCheckedKeys();
      console.log(ridList);
      ridList.forEach(element => {
        let obj = {};
        obj["aid"] = this.aid;
        obj["rid"] = element;
        this.params.push(obj);
      });
      console.log(this.params);
      let url = "/adminRole/editOne";
      this.httpPost(url, this.params, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "更改成功"
          });
          //清空树
          this.$refs.tree.setCheckedKeys(this.defaultList);
          this.dialogVisible = false;
          //清空params
          this.params.length = 0;
        } else {
          this.$message({
            type: "danger",
            message: "更改失败"
          });
        }
      });
    },

    //通过id查询角色权限
    getfindAdmin(aid) {
      let url = "/role/findAdminRole/" + aid;
      this.httpGet(url, res => {
        if (res.code == 200) {
          this.defaultList = [];
          res.data.forEach((element, index) => {
            this.$set(this.defaultList, index, element.roleId);
          });
          this.$refs.tree.setCheckedKeys(this.defaultList);
          console.log(this.defaultList);
        } else {
          console.log("查询失败");
        }
      });
    },
    //管理员列表
    getList() {
      let url = "/admin/getList";
      let params = {
        pageNum: this.val,
        pageSize: 10
      };
      this.httpPost(url, params, res => {
        if (res.code == 200) {
          this.List = res.data.list;
          this.total = res.data.total;
          this.List.forEach((element, i) => {
            this.List[i].index = (this.val - 1) * 10 + i + 1;
          });
        } else {
          console.log("查询失败");
        }
      });
    },
    //获取角色
    getRole() {
      let url = " /role/getList";
      this.httpPost(url, {}, res => {
        if (res.code == 200) {
          this.RoleList = res.data.list;
        } else {
          console.log("查询失败");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

